<template>
  <div class="container">
    <view class="info_box">
      <view class="info_title"> <text>基础信息</text>
        <text class="flag_box" v-if="!flag">正常</text>
        <text class="flag_box" v-if="flag" style="border-color: #f56c6c;color: #f56c6c;">报停中</text>
      </view>
      <view v-if="flag">
        <view class="info_content">
          <text> 上报时间 </text>
          <text> {{ faultTime || "-" }} </text>
        </view>
        <view class="info_content" style="padding-bottom: 20rpx">
          <text> 车牌号码 </text>
          <text> {{ licenseNumber || "-" }} </text>
        </view>
        <view class="info_content" style="padding-bottom: 20rpx">
          <text> 司机姓名 </text>
          <text> {{ driverName || "-" }} </text>
        </view>
        <view class="info_content" style="padding-bottom: 20rpx">
          <text> 报停原因 </text>
          <text> {{ faultCause || "-" }} </text>
        </view>
        <view class="info_content" style="padding-bottom: 20rpx">
          <text> 报停时长（时） </text>
          <text> {{ faultDuration || "-" }} </text>
        </view>
        <view class="info_content" style="padding-bottom: 20rpx">
          <text> 报停照片 </text>
        </view>
        <view class="info_content" style="padding-bottom: 20rpx">
          <image :src="fileList1[0].url" mode="widthFix" style="width: 150px; height: 300px"></image>
          <image :src="fileList2[0].url" mode="widthFix" style="width: 150px; height: 300px"></image>
        </view>
        <u-button text="提交" color="#000000" style="margin-top: 40rpx" @click="cancel"></u-button>
      </view>
      <view v-if="!flag">
        <view class="info_content" style="padding-bottom: 20rpx">
          <text> 司机姓名 </text>
          <text> {{ driverName || "-" }} </text>
        </view>
        <view class="info_content" style="padding-bottom: 40rpx">
          <text> 车牌号码 </text>
          <text> {{ licenseNumber || "-" }} </text>
        </view>
        <u-button text="车辆报停" color="#000000" style="margin-top: 40rpx" @click="targetStop"></u-button>
      </view>
    </view>
  </div>
  <!--<view class="container">
        <div class="border">
            <div v-if="flag" class="border-content">
                <div style="height: 10px;"></div>
                <div class="top-line">
                    <div class="line"></div>
                    <div style="width: 10px;"></div>
                    <div style="color: #1A512C;">报停信息填报</div>
                </div>
                <div style="height: 10rpx;"></div>
                <!~~ 表单 ~~>
                <div style="color: #718778;">
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">日期</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            <!~~ <input type="text" readonly v-model="date"> ~~>
                            {{ faultTime }}
                            <div style="height: 5rpx;"></div>

                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">司机</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ driverName }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">收运车</div>
                        <div class="borders">
                            <div style="height: 5rpx;"></div>
                            {{ licenseNumber }}
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">报停原因</div>
                        <div class="borders" style="color: #1A512C;">
                            <div style="height: 5rpx;"></div>
                            {{ faultCause }}
                            <!~~ <input v-model="faultCause" placeholder-class="holder-class" type="text" placeholder="请输入报停原因"> ~~>
                            <div style="height: 5rpx;"></div>
                        </div>
                    </div>
                    <div style="height: 10px;"></div>
                    <div class="form-flex">
                        <div style="width: 30%;color: #1A512C;font-weight: 500;">报停时长</div>
                        <div style="display: flex;align-items: center;width: 70%;">
                            <div class="borders-min" style="width: 60%;color: #1A512C;">
                                <div style="height: 5rpx;"></div>
                                {{ faultDuration }}
                                <!~~ <input type="text" placeholder-class="holder-class" v-model="faultDuration" placeholder="请输入报停时长"> ~~>
                                <div style="height: 5rpx;"></div>
                            </div>
                            <div style="width: 5px;"></div>
                            <div class="borders-min" style="width: 40%;">
                                <div style="height: 5rpx;"></div>
                                小时
                                <div style="height: 5rpx;"></div>
                            </div>
                        </div>
                    </div>

                    <div style="height: 10px;"></div>
                </div>
                <div>
                    <div style="width: 30%;color: #1A512C;font-weight: 500;">现场照片</div>
                    <div style="height: 5px;"></div>
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                        <div>
                            <u-upload :capture="['camera']" :fileList="fileList1" @afterRead="afterRead"
                                @delete="deletePic" name="1" multiple :maxCount="1" width="150" height="150">
                                <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fupload.jpg"
                                    mode="widthFix" style="width: 150px;height: 150px;"></image>
                            </u-upload>
                        </div>
                        <div>
                            <u-upload :capture="['camera']" :fileList="fileList2" @afterRead=" " @delete="deletePics"
                                name="2" multiple :maxCount="1" width="150" height="150">
                                <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fupload.jpg"
                                    mode="widthFix" style="width: 150px;height: 150px;"></image>
                            </u-upload>
                        </div>
                    </div>
                </div>
                <!~~ 按钮 ~~>
                <div style="height: 10px;"></div>
                <div class="footers">
                    <div class="button-footers" @click="cancel">取消报停</div>
                </div>
            </div>
            <div v-if="!flag">
                <div style="height: 10px;"></div>
                <div class="status">当前状态：正常</div>
                <div style="height: 10px;"></div>
                <div class="footers">
                    <div class="button-footers" @click="targetStop">车辆报停</div>
                </div>
            </div>
        </div>
    </view>-->
</template>
<script>
import { showCarStop, cancelStop } from "../api/api.js";

import request from "../../common/request";
export default {
  data() {
    return {
      flag: true, //flag为true时显示报停信息
      driverName: "",
      licenseNumber: "",
      faultCause: "",
      faultDuration: "",
      faultTime: "",
      img1: "",
      img2: "",
      request: request,
      base: "",
      fileList1: [],
      fileList2: [],
      vehicleId: "",
      id: "",
    };
  },
  methods: {
    targetStop() {
      console.log(1234);
      uni.navigateTo({
        url: "/pagesDriver/system/carStop",
      });
    },
    cancel() {
      uni.showModal({
        title: "取消报停",
        content: "确认要取消当前报停吗",
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if (confirm) {
            cancelStop({
              vehicleId: this.vehicleId,
              id: this.id,
            }).then((res) => {
              if (res.data.code == 200) {
                uni.showToast({
                  title: res.data.msg,
                  icon: "none",
                });
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 1,
                  });
                }, 1000);
              } else {
                uni.showToast({
                  title: res.data.msg,
                  icon: "none",
                  duration: 3000,
                });
              }
            });
          } else {
            uni.showToast({
              title: "取消",
              icon: "none",
              mask: true,
            });
          }
        },
      });
    },
  },
  onShow() {
    this.base = this.request.config.baseURL;
    showCarStop().then((res) => {
      console.log(res.data, "res/data");
      if (res.data.data == null) {
        this.flag = false;
        this.licenseNumber = uni.getStorageSync("licenseNumber")[0];
        this.driverName = uni.getStorageSync('userInfo').nickName;
      } else {
        const { data } = res.data;
        this.driverName = data.driverName;
        this.licenseNumber = data.licenseNumber;
        this.faultCause = data.faultCause;
        this.faultDuration = data.faultDuration;
        this.faultTime = data.faultTime;
        this.id = data.id;
        this.vehicleId = data.vehicleId;
        let arr = data.scenePhoto.split(",");
        console.log(arr, "arr");
        if (this.fileList1.length === 0) {
          this.fileList1.push({
            url: this.base + arr[0],
          });
        }
        console.log(this.fileList1, this.fileList2, "fileList------>");
        if (this.fileList2.length === 0) {
          this.fileList2.push({
            url: this.base + arr[1],
          });
        }

        this.flag = true;
      }
    });
  },
};
</script>
<style lang="scss">
.info_box {
  width: 100%;
  box-sizing: border-box;
  border-radius: 30rpx;
  background-color: #fff;
  padding: 40rpx;

  .info_title {
    width: 100%;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #f2f2f2;
    font-size: 36rpx;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .flag_box {
      width: 100rpx;
      font-size: 28rpx;
      font-weight: normal;
      height: 50rpx;
      border-radius: 8rpx;
      border: 2rpx solid #5ac725;
      color: #5ac725;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .info_content {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
  }

  .form_box {
    margin: 20rpx 0;
    font-size: 28rpx;
  }
}

.container {
  background: #f3f3f3;
  padding: 40rpx;
  min-height: 100vh;

  .border {
    border-radius: 10px;
    background: #e3ede2;
    height: 100vh;
    overflow-y: scroll;

    .border-content {
      width: 90%;
      margin-left: 5%;
    }
  }
}

.top-line {
  display: flex;
  align-items: center;
}

.line {
  background: #1a512c;
  width: 7rpx;
  height: 35rpx;
}

.form-flex {
  display: flex;
  align-items: center;
  width: 100%;
}

.borders {
  border: 1px solid #1a512c;
  border-radius: 5px;
  text-align: center;
  width: 70%;
}

.borders-min {
  border: 1px solid #1a512c;
  border-radius: 5px;
  text-align: center;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.button-footer {
  width: 48%;
  height: 50px;
  background: #066d29;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  border-radius: 10px;
}

.footers {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.button-footers {
  width: 90%;
  height: 50px;
  margin-left: 5%;
  background: #066d29;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  border-radius: 10px;
}

.top {
  width: 224rpx;
  height: 224rpx;
  margin: 0 auto;
  margin-bottom: 50rpx;
  margin-top: 50rpx;
  border: 1px solid red;

  image {
    width: 224rpx;
    height: 224rpx;
    border-radius: 50%;
  }

  .tips {
    font-size: 28rpx;
  }
}

.status {
  width: 90%;
  margin-left: 5%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #82bb94;
  color: #1a512c;
  height: 100px;
  font-weight: 600;
  font-size: 17px;
}
</style>
<style>
.holder-class {
  color: #1a512c;
}
</style>
